<template>
  <div id="userRegisterView">
    <div :style="{ display: 'flex'}" class="card-box">
      <a-card :style="{ width: '100%', height: '100%' }" title="用户注册">
        <template #extra>
          <a-link href="/user/login">返回登录</a-link>
        </template>
        <a-form
            label-align="left"
            auto-label-width
            :model="form"
            @submit="handleSubmit"
            class="login-form"
        >
          <a-form-item field="userAccount" label="账号">
            <a-input v-model="form.userAccount" placeholder="请输入账号" />
          </a-form-item>
          <a-form-item field="userPassword" tooltip="密码不少于 5 位" label="密码">
            <a-input-password
                v-model="form.userPassword"
                placeholder="请输入密码"
            />
          </a-form-item>
          <a-form-item field="checkPassword" tooltip="密码不少于 5 位" label="请确认密码">
            <a-input-password
                v-model="form.checkPassword"
                placeholder="请确认密码"
            />
          </a-form-item>
          <a-form-item field="邮箱" label="请输入邮箱">
            <a-input
                v-model="form.email"
                placeholder="请输入邮箱"
            />
          </a-form-item>
          <a-form-item field="用户名" label="请输入用户名">
            <a-input
                v-model="form.username"
                placeholder="请输入用户名"
            />
          </a-form-item>
          <a-form-item field="电话" label="请输入电话">
            <a-input
                v-model="form.phone"
                placeholder="请输入电话"
            />
          </a-form-item>
          <br><br>
          <a-form-item>
            <a-button type="primary" html-type="submit" style="width: 120px; margin-left: 1vw">
              注册
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import index, { useStore } from "vuex";
import {Service, UserRegisterDTO} from "@/generated";

/**
 * 表单信息
 */
const form = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
  username: "",
  email: "",
  phone: "",
} as UserRegisterDTO);

const router = useRouter();
const store = useStore();

/**
 * 提交表单
 * @param data
 */
const handleSubmit = async () => {
  const res = await Service.userRegisterUsingPost(form);
  // 注册成功，跳转登录页
  if (res.code === 1) {
    message.success('注册成功');
    await router.push({
      path: "/user/login",
      replace: true,
    });
  } else {
    message.error("注册失败，" + res.msg);
  }
};
</script>
<style>
#userRegisterView .login-form {
  background-color: rgba(0, 0, -1, 0.3);
  width: 75%;
  height: 320px;
  margin: 0px auto;
  padding: 30px;
  /*border-radius: 20px;*/
}

#userRegisterView .card-box {
  width: 35%;
  height: 530px;
  z-index: 3;
  margin: 0 auto;
  border-radius: 30px;
  background-color: white;
}

#userRegisterView .arco-card-size-medium .arco-card-header {
  height: 63px!important;
  padding: 10px 16px;
}

#userRegisterView .arco-card-header-title {
  font: 700 21px "Microsoft YaHei"!important;
}

#userRegisterView .arco-card.arco-card-size-medium.arco-card-bordered {
  border-radius: 30px;
  border: 1px solid rgb(0, 0, 0, .5);
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
</style>
